/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

/* eslint-disable no-shadow */
import React, { useState, useCallback } from 'react';
import { connect } from 'dva';
import { Row, Col } from 'antd';
import {
  Under,
  Regional,
  Audit,
  Apply,
  Forbidden,
  AuditRefus,
  ChargePost,
} from '@/components/RegionalStation';
import PageHeaderLayout from '@/layouts/PageHeaderLayout';
import StandardTab from '@/components/StandardTab';
import AreaAddModal from '@/components/_pages/Post/Area/AreaAddModal';
import styles from './style.less';

const TableZy = ({ onTabChange, activeKey }) => (
  <StandardTab
    style={{ marginBottom: 24 }}
    onChange={onTabChange}
    activeKey={activeKey}
    name="area"
    panes={[
      {
        tab: '下属驿站',
        component: <Under />,
      },
      {
        tab: '待审核驿站',
        component: <Audit />,
      },
      {
        tab: '已禁用驿站',
        component: <Forbidden />,
      },
      {
        tab: '已拒绝驿站',
        component: <AuditRefus />,
      },
      {
        tab: '为下属驿站充值',
        component: <ChargePost />,
      },
    ]}
  />
);
const TableZyZj = ({ onTabChange, activeKey }) => (
  <StandardTab
    style={{ marginBottom: 24 }}
    onChange={onTabChange}
    activeKey={activeKey}
    name="area"
    panes={[
      {
        tab: '下属驿站',
        component: <Under />,
      },
      {
        tab: '已禁用驿站',
        component: <Forbidden />,
      },
    ]}
  />
);
const TableDefault = ({ onTabChange, activeKey, show_individual }) => (
  <StandardTab
    style={{ marginBottom: 24 }}
    onChange={onTabChange}
    activeKey={activeKey}
    name="area"
    panes={[
      {
        tab: '下属驿站',
        component: <Under />,
      },
      {
        tab: '区域内独立驿站',
        component: <Regional />,
        hide: show_individual,
      },
      {
        tab: '待审核驿站',
        component: <Audit />,
      },
      {
        tab: '已拒绝驿站',
        component: <AuditRefus />,
      },
      {
        tab: '驿站加盟申请',
        component: <Apply />,
      },
      {
        tab: '为下属驿站充值',
        component: <ChargePost />,
      },
    ].filter(i => !i.hide)}
  />
);
const TableDefaultZone = ({ onTabChange, activeKey }) => (
  <StandardTab
    style={{ marginBottom: 24 }}
    onChange={onTabChange}
    activeKey={activeKey}
    name="area"
    panes={[
      {
        tab: '下属驿站',
        component: <Under />,
      },
    ]}
  />
);

const ZyTab = ({ isZJ, onTabChange, activeKey }) =>
  (isZJ ? (
    <TableZyZj onTabChange={onTabChange} activeKey={activeKey} />
  ) : (
    <TableZy onTabChange={onTabChange} activeKey={activeKey} />
  ));

const YzTab = ({ userKey, zone, onTabChange, activeKey, show_individual }) =>
  (userKey == 'yz' && zone !== '*' ? (
    <TableDefaultZone onTabChange={onTabChange} activeKey={activeKey} />
  ) : (
    <TableDefault
      onTabChange={onTabChange}
      activeKey={activeKey}
      show_individual={show_individual}
    />
  ));

const Area = props => {
  const [activeKey, setActiveKey] = useState('');
  const {
    user: {
      currentUser: { user_info, is_special = false },
    },
    options: { key },
  } = props;
  // 判断是否是中邮用户
  const isZyAccount = key == 'post';
  // 判断是否是支局账号
  const isZJ = user_info && user_info.branchLevel == '4';
  // 判断是否是特许加盟商
  const isSpacialPost = is_special && !isZyAccount;
  // 区域内独立驿站是否显示
  const show_individual = user_info && user_info.show_individual == '0';

  const onTabChange = useCallback(_activeKey => {
    setActiveKey(_activeKey);
  }, []);

  return (
    <PageHeaderLayout
      title={
        isSpacialPost ? (
          <Row type="flex" justify="space-between">
            <Col>下属驿站</Col>
            <Col>{!isZyAccount && <AreaAddModal />}</Col>
          </Row>
        ) : (
          '区域内驿站'
        )
      }
    >
      <div className={styles.main}>
        {isSpacialPost ? (
          <Under />
        ) : (
          <div style={{ paddingBottom: '24px', position: 'relative' }}>
            {!isZyAccount && <AreaAddModal />}
            {isZyAccount ? (
              <ZyTab
                isZJ={isZJ}
                onTabChange={onTabChange}
                activeKey={activeKey}
                isZyAccount={isZyAccount}
              />
            ) : (
              <YzTab
                userKey={key}
                zone={user_info.area_ids}
                onTabChange={onTabChange}
                activeKey={activeKey}
                show_individual={show_individual}
              />
            )}
          </div>
        )}
      </div>
    </PageHeaderLayout>
  );
};

export default connect(({ user, setting }) => ({
  user,
  ...setting,
}))(Area);
